<template>
    <el-col :span="6">
    <el-card class="box-card">
      <div ref="chart" style="height:38vh;width: 360px;"></div>
     <template #footer>Footer content</template>
    </el-card>
  </el-col>
  </template>
  
  
  
  
  <script>
  import axios from 'axios';
  import * as echarts from 'echarts'
  
  export default {
    data() {
      return {
        chart:null,
        data: [] // 初始化 data 变量为空数组
      };
    },
    mounted() {
      this.initChart(); // 初始化 Echarts 实例
      this.fetchData();
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.chart);
      },
      fetchData() {
        this.$http.get('http://localhost:8080/comment/videocomment') // 发起后端请求获取查询结果
          .then(response => {
            this.data = response.data; // 将返回的数据赋值给 data 变量
            this.renderChart();
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });
      },
      renderChart() {
        const options = {
          // 在这里根据需求配置 Echarts 图表的选项
          legend: {
           itemWidth: 10, // 设置图例项的宽度
           itemHeight: 10 // 设置图例项的高度
          },
          title: {
          text: '视频评论top',
          left: 'center'
    },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
  
          xAxis: {
            type: 'category',
            data: this.data.map(row => row.workname), // 使用 this.data 进行 map 操作
            axisLabel: {
            rotate: 45 // 调整旋转角度，可以根据需要进行调整
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'bar',
            data: this.data.map(row => row.videocount) // 使用 this.data 进行 map 操作
          }]
        };
        this.chart.setOption(options);
      }
    }
  };
  </script>
  
  <style>
  /* 在这里添加你的样式 */
  </style>